import React, { memo } from 'react'

import ZHTopBanner from './c-cpns/top-banner/index.js'
import ZHHotRecommend from './c-cpns/hot-recommend/index'
import ZHNewAlbum from './c-cpns/new-album/index'
import ZHRankingList from './c-cpns/ranking-list/index'
import ZHUserLogin from './c-cpns/user-login/index'
import ZHSettleSinger from './c-cpns/settle-singer/index'
import ZHHotAnchor from './c-cpns/hot-anchor/index'

import {
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight
} from './style'

function ZHRecommend(props) {


  return (
    <RecommendWrapper>
      <ZHTopBanner/>
      <Content className="wrap-v2">
        <RecommendLeft>
          <ZHHotRecommend/>
          <ZHNewAlbum/>
          <ZHRankingList/>
        </RecommendLeft>
        <RecommendRight>
          <ZHUserLogin/>
          <ZHSettleSinger/>
          <ZHHotAnchor/>
        </RecommendRight>
      </Content>
    </RecommendWrapper>
  )
}

export default memo(ZHRecommend) 